<template>
  <view>
    <dropdown-menu ref="drop">
      <dropdown-item :title="houseTitle" ref="houseDrop">
        <view @click="choseHouse(item)" v-for="(item,ind ) in houseList" :key="ind">
          <view class="item_picker">
            {{ item.buildingname }}
          </view>
          <view class="h_line"></view>
        </view>

      </dropdown-item>
      <dropdown-item :title="levelTitle" ref="levelDrop">
        <view @click="choseLevel(item)" v-for="(item,ind ) in houseLevelList" :key="ind">
          <view class="item_picker">
            {{ item.layername }}
          </view>
          <view class="h_line"></view>
        </view>
      </dropdown-item>
    </dropdown-menu>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import DropdownMenu from '@/pages/components/dropdown-menu.vue';
import DropdownItem from '@/pages/components/dropdown-item.vue';

@Component({
  components: {
    DropdownMenu,
    DropdownItem,
  }
})
export default class MenuListView extends Vue {

  @Prop() houseList?:any;
  @Prop() houseLevelList?:any;

  houseTitle='楼栋';
  levelTitle='楼层';

  choseHouse(item: any) {
    (this.$refs.houseDrop as any)?.close()
    this.$emit('choseHouse',item);
    (this.$refs.drop as any)?.handleTitleTap(1)
  }

  choseLevel(item: any) {
    this.levelTitle=item.layername;
    (this.$refs.levelDrop as any)?.close()
    this.$emit('choseLevel',item)
  }
}
</script>

<style scoped>
.item_picker {
  padding: 20rpx;
}
</style>